<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>

<html>
    <head>
		<%@ include file="/WEB-INF/views/include/common.jsp" %>
		<meta name="AUTHOR" content="QroTech Inc." />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
		<meta http-equiv="PRAGMA" content="NO-CACHE">
		<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>큐로넷::위치관제시스템</title>
		
		<link rel="stylesheet" href="${cssUrl}/header-1.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl}/fancy_table.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl}/menu.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl}/table.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl}/button.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl}/m-300.css" type="text/css" />
		<link rel="stylesheet" href="${cssUrl}/m-330.css" type="text/css" />
		<script src="${jsUrl}/m-330.js"></script>
		
		
    </head>
    <body onLoad="init()">
    	<div id="overlay" class="overlay" >
    	</div><!-- contentWrapper end -->
    	<div class="headerContent">
	
		<div class="pageHeader">
			<%@ include file="/WEB-INF/views/include/logoLink.jsp" %>
			<div id="pageNav">
				<ul>
<!-- 					<a href="m-100.html" class="togglerHeader"><li class="hmenu0" id="hdmenu0"></li></a> -->
<!-- 					<a href="#" class="togglerHeader"><li class="hmenu1" id="hdmenu1"></li></a> -->
<!-- 					<a href="m-300.html" class="togglerHeader"><li class="hmenu2" id="hdmenu2"></li></a> -->
<!-- 					<a href="#" class="togglerHeader"><li class="hmenu3" id="hdmenu3"></li></a> -->
					<%@ include file="/WEB-INF/views/include/mainNaviStyle2.jsp" %>
				</ul>
			</div>
			<div id="pageNavRight">
				<%@ include file="/WEB-INF/views/include/titleLink.jsp" %>
			</div>
		</div>
			<div class="header_line"></div>
		</div><!--header end-->	
	
        
        	<div class="secondMenu" >
					<div id="menu">
						<ul>
							<%@ include file="/WEB-INF/views/include/innerNavi.jsp" %>
						</ul>
					</div>
						
				</div><!-- second menu end -->
			<div class="m330height">
				<div class="mainContent330">
				<div class="searchInfo">
					<ul>
						<li class= "locationInfo"><span>회사 정보 관리</span></li>
						
					</ul>
					<div class="last"><a onclick="javscript:openQuestionPopup('http://www.qronet.co.kr/help/qronet_help.html#ModifyCompany')"><img src="${imgUrl}/question_mark.png"></a></div>
				</div><!-- searchInfo end -->
				<div class="companyInfo">
					<form name="theForm" action="/envCompany/updateCompanyInfo" id="theForm" method="post" enctype="multipart/form-data">
					<table class="content1" id="companyInfo">
								<tr>
									<th colspan="2" style="height:100px;padding:0px;"><img src="${imgUrl}/modify_company.png" style="width:550px; height:100px;"><br />&nbsp;</th>
								</tr>
								<tr>
									<th>회사명</th>
									<td class="long"><input type="text" name="customerName" id="customerName"></td>
								</tr>
								<tr>
									<th>회사로고</th>
									<td >
										<div class="companyLogo"><img id="logo"></div>
										<input type="file" name="file" style="width:305px" onchange="readURL(this);"/>
										<!-- <input type="text" style="width:230px;"> <a class="button1">파일선택...</a> -->
									</td>
								</tr>
								<tr>
									<th></th>
									<td>
										<ul>
											<li>회사로고를 등록하시면 관제시스템의 좌측 상단에 표시가 됩니다.</li>
											<li>로고파일은 가로 300 x 세로 82인 png, jpg 파일로 등록해주세요.</li>
										</ul>
									</td>
								</tr>
								<tr>
									<th>담당부서</th>
									<td><input type="text" id="dept" name="dept"></td>
								</tr>
								<tr>
									<th>담당자명</th>
									<td><input type="text" id="officer" name="officer"></td>
								</tr>
								<tr>
									<th>담당자ID</th>
									<td id="officerID">UserId</td>
								</tr>
								<tr>
									<th>전화번호(핸드폰)</th>
									<td><input type="text" name="handPhone" id="handPhone"><p>* 숫자만 입력하세요</p></td>
								</tr>
								<tr>
									<th>전화번호(일반)</th>
									<td><input type="text" id="phone" name="phone"><p>* 숫자만 입력하세요</p></td>
								</tr>
								<tr>
									<th>이메일</th>
									<td class="long"><input type="text" id="email" name="email"></td>
								</tr>
								<tr>
									<th>주소</th>
									<td><input type="text" id="addressComponent3" name="addressComponent3" style="width:100px;"> <a class="button1 popup_open"> 우편번호...</a></td>
								</tr>
								<tr>
									<th></th>
									<td class="long">
										<input type="text" id="addressComponent1" name="addressComponent1"><br />
										<input type="text" id="addressComponent2" name="addressComponent2"><br />&nbsp;
										<input type="hidden" id="addressComponent4" name="addressComponent4">
									</td>
								</tr>
								
					</table>
					</form>
					<div class="button"><a class="button3" onClick="updateCompanyInfo()">변경사항 저장</a></div>		
				</div>
				
			</div> <!-- mainContent end -->
		</div><!-- m310height end -->
		
		<div class="chart_footer">
		    <div class="footerCenter">
		       <span>Copyright ⓒ 2013 Qrotech Co.,Ltd. All rights reserved.</span>
		    </div>
	 </div>	<!-- footer end-->	
	 
	 
	 	
	 <div class="m330_popup_box" id="popup1">
		<div class="tableTitleA ">우편번호 검색<img class="popup_close" src="${imgUrl}/popup_close.png"></div>
		<div class="content2">
			<ul>
				<li>검색하실 주소의 동/읍/면을 입력하고 검색 버튼을 눌러 선택하세요.</li>
				
			</ul>
			<div class="searchZipcode">동/면/읍 검색 : <input type="text" id="searchName" onkeypress="if(event.keyCode==13) {getPostList(); return false;}"> <a class="button3" onClick="getPostList()">검색</a></div>
			
					<div class="tableLength">
						<div class="chart_head" >
							<table  valign="top" cellpadding="0" cellspacing="0"> 
								<tr valign="top" >
									<th width="70px">우편번호</th>
									<th width="*">주소</th>
								</tr>	
							</table>
						</div><!--chart_head end-->
						<div class="chart_body">
							<table cellpadding="0" cellspacing="0" id="zipCodeList"> 
								<!-- <tr valign="top" >
									<td width="70px" id="zipCode">100-100</td>
									<td width="*" id="dong">서울시 광진구 군자동 98</td>
								</tr>
								<tr valign="top" >
									<td width="70px">100-100</td>
									<td width="*">서울시 광진구 군자동 98</td>
								</tr>
								<tr valign="top" >
									<td width="70px">100-100</td>
									<td width="*">서울시 광진구 군자동 98</td>
								</tr>
								<tr valign="top" >
									<td width="70px">100-100</td>
									<td width="*">서울시 광진구 군자동 98</td>
								</tr>
								<tr valign="top" >
									<td width="70px">100-100</td>
									<td width="*">서울시 광진구 군자동 98</td>
								</tr>
								<tr valign="top" >
									<td width="70px">100-100</td>
									<td width="*">서울시 광진구 군자동 98</td>
								</tr> -->
							</table>
						</div>	
					</div>
			<div class="Rowbtn2"><a class="button2" onClick="setPostOK()">확인</a><a class="button2 last" onClick="popupClose()">취소</a></div>
		</div><!-- content end-->	
	</div>	<!--popup_box 330-->
	<form name="postForm" id="postForm" style="display:none;">
		<input type="text" name="paramAddressComponent1" id="paramAddressComponent1">
		<input type="text" name="paramAddressComponent2" id="paramAddressComponent2">
		<input type="text" name="paramAddressComponent3" id="paramAddressComponent3">
		<input type="text" name="paramAddressComponent4" id="paramAddressComponent4">
		
	</form>
	<script language="javascript">
	var _this = this;
	function init() {
		<c:if test="${param.type eq 1}">
			alert('수정 되었습니다.');
		</c:if>
 		getCompanyInfo();
	}
	function getCompanyInfo() {
		try{
			var url = "getCompanyInfo.json";
			var param = "";
			AjaxPost(url, param, function(data){
// 				jsonLog(data.companyInfo);
				$("#customerName").val(data.companyInfo['customerName']);
				$("#dept").val(data.companyInfo['dept']);
				$("#officer").val(data.companyInfo['officer']);
				$("#phone").val(data.companyInfo['phone']);
				$("#officerID").text(data.companyInfo['officerID']==null?"":data.companyInfo['officerID']);
				$("#email").val(data.companyInfo['email']);
				$("#handPhone").val(data.companyInfo['handPhone']);
				$("#addressComponent1").val(data.companyInfo['addressComponent1']);
				$("#addressComponent2").val(data.companyInfo['addressComponent2']);
				$("#addressComponent3").val(data.companyInfo['addressComponent3']);
				$("#addressComponent4").val(data.companyInfo['addressComponent4']);
				
				$('#logo').attr('src', data.companyInfo['logoFile']);
				$('#logo').css({'width':'300','height':'82'});
			});
		}catch(e){
			
    	}
	}
	
	function updateCompanyInfo() {
		try{
			$("#theForm").submit();
		}catch(e){
			
    	}
	}
	function getPostList() {
		try{
			var searchName = $("#searchName").val();
			if(searchName == "") {
				return;
			}
			var rtnVal = "";
			var url = "getPostList.json";
			var param = "searchName="+$("#searchName").val();
			AjaxPost(url, param, function(data){
   			 jsonLog(data.postList);
	   			 if (data.postList.length > 0) {
	   				$(data.postList).each(function(ind) {
	   					rtnVal += "<tr valign='top' onClick='setAddress(this)' style='cursor:pointer;'>";
	   					rtnVal += "	<td width='70px' id='zipCode'>"+this['zipCode']+"</td>";
						rtnVal += " <td width='*' id='address'>"+this['sido']+" "+this['gugun']+" "+this['dong']+" "+this['bungi']+"</td>";
						rtnVal += " <td style='display:none;'><input type='hidden' id='bungi' value="+this['bungi']+">";
						rtnVal += " 						  <input type='hidden' id='sido' value="+this['sido']+">";
						rtnVal += " 						  <input type='hidden' id='gugun' value="+this['gugun']+"></td>";
						rtnVal += " <td id='dong' style='display:none;'>"+this['dong']+"</td>";
						rtnVal += "</tr>";
	   				});
	   				$("#zipCodeList").html(rtnVal);
	   			 }
			});
		}catch(e){
			
    	}
	}
	
	function setAddress(tr) {
		$("#zipCodeList > tbody > tr > td").each(function() {
			$(this).css("background-color", "");
		});
		$(tr).find("#zipCode").css("background-color", "#FFFFCC");
		$(tr).find("#address").css("background-color", "#FFFFCC");
		
		var address = $(tr).find("#sido").val()+" "+$(tr).find("#gugun").val()+" "+$(tr).find("#dong").text();
		$("#paramAddressComponent1").val(address);
		$("#paramAddressComponent2").val($(tr).find("#bungi").val());
		$("#paramAddressComponent3").val($(tr).find("#zipCode").text());
		$("#paramAddressComponent4").val($(tr).find("#sido").val()); //sido
	}
	
	function setPostOK() {
		$("#addressComponent1").val($("#paramAddressComponent1").val());
		$("#addressComponent2").val($("#paramAddressComponent2").val());
		$("#addressComponent3").val($("#paramAddressComponent3").val());
		$("#addressComponent4").val($("#paramAddressComponent4").val());
		popupClose();
	}
	
	function popupClose() {
		$('#overlay').css('display', 'none');
		$('#popup1').hide();
	}
	
	function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#logo').attr('src', e.target.result);
                $('#logo').css({'max-width':'300','max-height':'82'});                
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
	</script>
  </body>
</html>

